<template>
  <div class="app-container">
    <div class="card-box">
      <el-table
        v-loading="commissionStore.loading.list || commissionStore.loading.update"
        :data="commissionStore.list"
        row-id="id"
      >
        <el-table-column label="ID" prop="id" />
        <el-table-column label="创建时间" prop="created_at" />
        <el-table-column label="金额" prop="amount" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
      <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.size"
        style="margin-top: 10px"
        background
        :total="commissionStore.totalCount"
        @change="commissionStore.fetchList(params)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { CommissiontListParams, CommissiontType } from "@/api/finance/commission";
import { useCommissionStoreHook } from "@/store/modules/finance/commission";

const commissionStore = useCommissionStoreHook();

const params = reactive<CommissiontListParams>({
  page: 1,
  size: 10,
});

onMounted(() => {
  commissionStore.fetchList(params);
});
</script>

<style scoped lang="scss"></style>
